<template>
	<view>
    <customtop top_title="换群记录"></customtop>
    <view class="top_nav2" :style="{top: customtopHight + 'px'}">
    	<view class="box container">
        <view class="item" :class="params.ident == 1 ? 'on' : ''" @click="setIndet(1);">主动交换的群</view>
        <view class="item" :class="params.ident == 2 ? 'on' : ''" @click="setIndet(2);">被交换的群</view>
    	</view>
    </view>
    <view class="top_nav2_blank"></view>

    <view class="qun_list2 container" v-if="!loading">
      <view class="items" v-if="data_list.length > 0">
        <view class="item" v-for="(item, index) in data_list" :key="index">
          <view class="top">
            <image class="qrcode" mode="aspectFill" @click="previewImage(item.qrcode)" :src="item.qrcode" />
            <view class="info">
              <view class="name">{{item.name}}</view>
            </view>
          </view>
          <ul class="type">
            <view class="type-item"><span class="first">社群编号：</span><span>{{item.id}}</span></view>
            <view class="type-item"><span class="first">查看时间：</span><span>{{item.log_created_at}}</span></view>
          </ul>
        </view>
        <u-loadmore :status="loadmore_status" />
      </view>
      <u-empty
        v-if="data_list.length == 0"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
        text="暂无记录~"
      >
      </u-empty>
    </view>
	</view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      data_list: [],
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
        ident: 1,
      },
      customtopHight: uni.getStorageSync('statusBarHeight') + uni.getStorageSync('navHeight'),
    }
  },

  onLoad: function () {
    this.initRequest();
  },

  onPullDownRefresh: function() {
    this.initRequest();
  },

  onReachBottom() {
    this.getMore();
  },

  methods: {
    getHuanLogsPaginate: function() {
      request.post('/qun/getHuanLogsPaginate', this.params).then(res => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        this.loading = false;
        this.data_total = res.data.total;
        if (res.data.total == 0) return false;

        if (res.data.current_page == 1) {
          this.data_list = res.data.data;
        } else {
          this.data_list = this.data_list.concat(res.data.data);
        }

        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        let params = this.params;
        params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
        this.params = params;
      })
    },

    initRequest: function() {
      uni.showLoading()
      this.loading = true;
      this.data_list = [];
      this.params.page = 1;
      this.getHuanLogsPaginate();
    },

    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getHuanLogsPaginate();
      }
    },

    setIndet: function(value) {
      this.params.ident = value;
      this.initRequest();
    },

    previewImage: function(current) {
      let urls = [];
      urls.push(current);
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    jumpPage: function(url) {
      uni.navigateTo({
        url: url,
      })
    }
  }
}
</script>

<style>
@import url("qun.css");
</style>
